<template>
  <div class="container">
    <header>
      <div class="header-title" @click="gotoIndex">GOParkin</div>
      <div class="head-picture" @click="showLoginOut">
        <img src="../assets/headPicture.svg" alt="" />
      </div>
      <div class="loginOut" v-if="needShow">
        <span @click="changePswHandle"> Change Password</span> /
        <span @click="loginOutHandle"> Login Out</span>
      </div>
    </header>
    <article>
      <aside>
        <div>
          <a-menu mode="inline" :default-open-keys="['sub4']">
            <a-sub-menu key="sub4">
              <span slot="title"
                ><a-icon type="setting" /><span>Navigation</span></span
              >
              <a-menu-item
                v-for="(item, index) in routerList"
                :key="index"
                @click="chooseHandle(item)"
              >
                {{ item.name }}
              </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </div>
      </aside>
      <section class="right-box">
        <div>
          <div class="tits">
            <a-breadcrumb>
              <a-breadcrumb-item v-for="(item, index) in routerArr" :key="index"
                ><span>{{ item }} </span></a-breadcrumb-item
              >
            </a-breadcrumb>
            <!-- 加载进度圈 -->
            <a-spin class="loading-process" v-if="this.$store.state.loadings">
              <a-icon
                slot="indicator"
                type="loading"
                style="font-size: 24px"
                spin
              />
            </a-spin>
          </div>
          <!-- 主体部分 -->

          <router-view class="main-show-areas"></router-view>
        </div>
        <footer>
          <div>Goparkin@2020</div>
          <div class="desc-about">
            <span @click="gotoAboutPage">About</span>
            <span @click="gotoPrivacyPage"> Privacy</span>
            <span @click="gotoTCPage">T&C</span>
          </div>
        </footer>
      </section>
    </article>
  </div>
</template>

<script>
import store from "../store/index";

import routerList from "../routerList/addRouter";
export default {
  //import引入的组件
  components: {},
  data() {
    return {
      // 动态路由
      asideList: [],
      // 显示退出登录
      needShow: false,
      // 跳转的路由层级
      routerArr: [],
      //  路由信息
      routerList,
    };
  },
  //方法集合
  watch: {
    $route: {
      handler: function () {
        // console.log(val, "路由信息");
        this.routerArr = this.$route.fullPath
          .split("/")
          .splice(1, this.$route.fullPath.length);
      },
      // 深度观察监听
      deep: true,
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // console.log(store.state.asideRouter, "登陆以后拿到了侧边栏路由数据");
    // 剔除404页面，渲染其他的页面
    this.asideList = store.state.asideRouter.slice(
      0,
      store.state.asideRouter.length - 1
    );
    // console.log(this.$route,"完整A");
    this.routerArr = this.$route.fullPath
      .split("/")
      .splice(1, this.$route.fullPath.length);
    // console.log(this.routerArr, "初始路由");
    // 动态路由，可以提前配好，根据角色选择渲染侧边栏即可
    // console.log(routerList, "路由信息");
    this.routerList = routerList.slice(0, routerList.length - 1);
  },
  methods: {
    // 退出登录的显示
    showLoginOut() {
      if (this.needShow == true) {
        this.needShow = false;
      } else {
        this.needShow = true;
      }
    },
    // 退出登录
    loginOutHandle() {
      this.$router.push("/");
      localStorage.clear("authorization");
    },
    // 修改密码
    changePswHandle() {
      console.log("修改密码");
    },

    // 前往其他页面-关于
    gotoAboutPage() {
      this.$router.push("/about");
    },
    // 前往其他页面-隐私
    gotoPrivacyPage() {
      this.$router.push("/privacy");
    },
    // 前往其他页面-规则
    gotoTCPage() {
      this.$router.push("/otherRules");
    },
    // 侧边栏菜单点击事件
    chooseHandle(item) {
      // console.log(item, "菜单的点击事件");
      this.$router.push(`/index${item.path}`);
      // 完整的路由表
    },
    // 回到首页
    gotoIndex() {
      this.$router.push(`/index`);
    },
  },
};
</script>
<style  lang="less" scoped>
.container {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}
header {
  height: 10vh;
  background-color: #00bdb5;
  box-sizing: border-box;
  padding-left: 50px;
  padding-right: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .header-title {
    color: #fff;
    font-size: 24px;
    cursor: pointer;
  }
  .head-picture {
    // border: 1px solid red;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    img {
      width: 50px;
      height: 50px;
      border: 1px solid #fff;
      border-radius: 50px;
    }
  }
  .loginOut {
    position: absolute;
    right: 120px;
    cursor: pointer;
    font-size: 24px;
    border: 1px solid #00bdb5;
    color: #fff;
  }
}
article {
  height: 90vh;
  width: 100vw;
  display: flex;
}
aside {
  width: 10vw;
  height: 100%;
  border-right: 1px solid #00bdb5;
  // border: 1px solid red;
  width: 10vw;
}
.right-box {
  width: 90vw;
  // border: 1px solid red;
  position: relative;
  box-sizing: border-box !important;
  .tits {
    padding-left: 30px;
    // border: 1px solid yellow;
    display: flex;
  }
  .loading-process {
    margin-left: 25%;
  }
  .main-show-areas {
    box-sizing: border-box;
    padding: 30px;
    height: 77vh;
    // border: 1px solid black;
  }
  ::v-deep.ant-breadcrumb {
    // margin-top: 30px;
    // margin-left: 30px;
    // margin-bottom: 30px;
    font-size: 24px;
    color: #00bdb5;
  }

  ::v-deep.ant-breadcrumb-link {
    font-size: 24px;
    color: #00bdb5;
  }
  footer {
    // border: 1px solid red;
    font-size: 24px;
    color: #fff;
    width: 100%;
    position: absolute;
    height: 10%;
    bottom: 0;
    background-color: #00bdb5;
    box-sizing: border-box;
    padding-left: 50px;
    padding-right: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .desc-about {
      span {
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>